<script lang="ts">
import {onMounted, ref} from 'vue'
import {UserFilled} from '@element-plus/icons-vue'
import router from "@/router";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
export default {
  setup(){
    const custImg=ref("")
    const custId=ref()
    const custAccount=ref('')
    const activeIndex1 = ref('1')
    const handleSelect = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
    onMounted(() => {
      getCustId()
      getCustImg()
      getAccount()
      checkUser()
    })
    const getCustId = () =>{
      let item = localStorage.getItem("custId");
      try {
        custId.value = item ? JSON.parse(item) : null;
      } catch (error) {
        console.error('Error parsing JSON:', error);
      }
    }
    const getCustImg = () =>{
      let item = localStorage.getItem("avatar");
      console.log(item)
      try {
        custImg.value = item ? JSON.parse(item) : null;
      } catch (error) {
        custImg.value=""
        console.error('Error parsing JSON:', error);
      }
    }
    const getAccount = () =>{
      let item = localStorage.getItem("custAccount");
      try {
        custAccount.value = item ? JSON.parse(item) : null;
      } catch (error) {
        console.error('Error parsing JSON:', error);
      }
    }

    const checkUser = async () => {
      console.log(custAccount.value)
      console.log(custId.value)
      if (custId.value === null && custAccount.value === null) {
        return "ok"
      } else {
        const res = await request.get(`/user/check/${custId.value},${custAccount.value}`)
        console.log(res.data.data)
        if (res.data.data !== "user" && res.data.data !== "admin") {
          await router.push("/login")
          ElMessage("信息有误")
        }
      }
    }


    const clickNone = () => {
      router.push("/login")
    }

    const clickAvator = () =>{
      router.push("/userPage")
    }

    return{
      activeIndex1,
      handleSelect,
      onMounted,
      custImg,
      custId,
      UserFilled,
      clickNone,
      clickAvator
    }
  }
}
</script>

<template>
  <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
  >
    <router-link to="/index">
      <el-menu-item index="1">首页</el-menu-item>
    </router-link>
    <router-link to="/order/page">
      <el-menu-item index="2">我的订单</el-menu-item>
    </router-link>
    <router-link to="/favourite">
      <el-menu-item index="3">收藏</el-menu-item>
    </router-link>
    <el-menu-item index="4" class="image">
      <div class="block">
        <el-avatar :icon="UserFilled" v-if="custImg === '' && custId ===null" :size="55" @click="clickNone"/>
        <el-avatar :icon="UserFilled" v-else-if="custImg === '' && custId !==null" :size="55" @click="clickAvator"/>
        <el-avatar v-else :size="50" :src=custImg @click="clickAvator"/>
      </div>
    </el-menu-item>

  </el-menu>
</template>


<style scoped>
  .image{
    margin-left: auto;
  }
  .el-menu{
    width:100%;
    margin: auto;
  }
</style>